<template>
	<div class="panel">
		<div class="hd">
			<h3>{{formDatas.formName}}</h3>
			<div class="edit" v-if="!editFlag">
				<button class="edit-btn" @click="edit" ><span ><i class="glyphicon glyphicon-edit"></i>编辑</span></button>
			</div>
		</div>
		<div class="bd" v-loading="loading">
			<form-components :formDatas="formDatas" :editFlag.sync="editFlag" @reloadData="getData()"></form-components>
		</div>
	</div>
</template>
<script>
import FormComponents from "@/components/common/form/Form";
export default {
  name: "TypeForm",
  components: { FormComponents },
  data() {
    return {
      formDatas: [],
      editFlag: false,
      xh: this.$route.query.xh,
      loading: true
    };
  },
  created: function() {
    this.getData();
  },
  mounted: function() {
    this.$nextTick(function() {});
  },
  methods: {
    getData() {
      this.$http
        .get("/data/form/type-form.json", {
          params: {
            dataId: this.xh
          }
        })
        .then(res => {
          if (res.code === 0) {
            this.loading = false;
            this.formDatas = res.data;
            this.$emit("title", this.formDatas.formName);
          }
        });
    },
    edit() {
      this.editFlag = true;
      this.getData();
    }
  }
};
</script>
